<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: xiaobai
 * @Date: 2021-06-10 14:48:15
 * @LastEditors: smallWhite
 * @LastEditTime: 2024-02-05 11:37:09
 * @FilePath: /huizhouwebsite-official-website/src/views/home/index.vue
-->
<template>
  <div>
    <div class="banner_box">
      <img class="loadimg"
        src="../../assets/imgaes/loading.png"
        v-if="bannerList.length == 0">
      <el-carousel
        :height="height">
        <el-carousel-item
          v-for="(item,index) in bannerList"
          :key="index">
          <div
            class="banner_img">
            <img
              :src="item.imgUrl"
              class="card_animate">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="news_box">
      <div
        class="text-center">
        <span
          class="index_title">新闻资讯</span><span
          class="text-center index_title_scond">News
          And
          Information</span>
      </div>
      <div
        class="news_items index">
        <div
          v-for="(item,index) in newsList"
          :key="index">
          <div
            class="news_first"
            v-if="item.types === '1'"
            @click="gotoDetails(item)">
            <div
              class="news_img">
              <img
                :src="item.imgUrl">
            </div>
            <div
              class="news_content">
              <div
                class="news_title">
                {{item.title}}
              </div>
              <div
                class="news_times">
                <i
                  class="el-icon-date"></i>
                <span>{{item.createTime.substring(0,10)}}</span>
              </div>
              <div
                class="news_body">
                <p>
                  {{item.introduction}}
                </p>
              </div>
              <span
                class="news_btn_span">查看详情>></span>
            </div>
          </div>
          <div
            v-if="item.types === '2'">
            2
          </div>
          <div
            v-if="item.types === '3'">
            3
          </div>
        </div>
      </div>
    </div>
    <div
      class="bg-white bg_img">
      <div class="yewu_box">
        <div
          class="text-center">
          <span
            class="index_title">业务领域</span>
          <span
            class="text-center index_title_scond">Business
            Area</span>
        </div>
        <div
          style="overflow-x: auto;">
          <div
            class="yewu_box_item_box">
            <div
              class="yewu_box_item"
              v-for="(item,index) in projectList"
              :key="index">
              <div
                class="yewu"
                :style="item.style">
                <div
                  class="card_a">
                  <img
                    :src="item.url"
                    class="card_img">
                  <div
                    class="yewu_title">
                    {{item.name}}
                  </div>
                </div>
                <div
                  class="yewu_content">
                  <span
                    @click="gotoYewu(index)"
                    class="yewu_btn">查看详情</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-img"
      style="background: rgb(53, 71, 79);">
      <div
        class="project_box">
        <div
          class="text-center">
          <span
            class="index_title"
            style="color: rgb(255, 255, 255);">工程案例</span>
          <span
            class="text-center index_title_scond">Engineering
            Cases</span>
        </div>
        <el-row :gutter="20"
          class="project_ul">
          <el-col :sm="12"
            :lg="8"
            v-for="(item,index) in gongchengList"
            :key="index">
            <div class="li"
              @click="gotoProject(item)">
              <img
                :src="item.imgUrl"
                class="project_img project_animate">
              <div
                class="img_bg">
                <div
                  style="padding: 30px; font-size: 17px;">
                  {{item.name}}
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- <div class="news_box">
      <div class="text-center"><span class="index_title">新闻资讯</span><span class="text-center index_title_scond">News And Information</span></div>
      <div class="news_items index">
        <div v-for="(item,index) in newsList" :key="index">
          <div class="news_first" @click="gotoDetails(item)">
            <div class="news_img">
              <img :src="item.imgUrl">
            </div>
            <div class="news_content">
              <div class="news_title">{{item.title}}</div>
              <div class="news_times">
                <i class="el-icon-date"></i>
                <span>{{item.createTime.substring(0,10)}}</span>
                </div>
              <div class="news_body" >
                <p>{{item.introduction}}</p>
              </div>
              <span class="news_btn_span">查看详情>></span>
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import axios from 'axios'
import ProjectIcon1 from '../../assets/imgaes/index_icon1.png'
import ProjectIcon2 from '../../assets/imgaes/index_icon2.png'
import ProjectIcon3 from '../../assets/imgaes/index_icon3.png'
import ProjectIcon4 from '../../assets/imgaes/index_icon4.png'
import ProjectIcon5 from '../../assets/imgaes/index_icon5.png'

export default {
  data() {
    return {
      height: '100vh',
      bannerList: [],
      gongchengList: [],
      projectId: '',
      newsList: [],
      projectParentId: '',
      projectList: [
        {
          id: 1,
          name: '公路工程',
          url: ProjectIcon1,
          style: 'background: rgb(29, 104, 189)'
        },
        {
          id: 2,
          name: '市政工程',
          url: ProjectIcon2,
          style: 'background: rgb(105, 186, 110)'
        },
        {
          id: 3,
          name: '桥梁工程',
          url: ProjectIcon3,
          style: 'background: rgb(52, 198, 217)'
        },
        {
          id: 4,
          name: '隧道工程',
          url: ProjectIcon4,
          style: 'background: rgb(254, 192, 47)'
        },
        {
          id: 5,
          name: '电子与智能化工程',
          url: ProjectIcon5,
          style: 'background: rgb(252, 122, 148)'
        }
      ]
    }
  },
  mounted() {
    setTimeout(() => {
      axios.post('/home/project', {}).then(res => {
        console.log(res.data.data.projectList, '010101')
        this.projectId = res.data.data.projectList[0].id
        this.projectParentId = res.data.data.projectList[4].id
        this.getBanner()
        this.getProject()
        this.getNews()
      })
    }, 500)
  },
  methods: {
    getBanner() {
      axios.post('/home/img', { projectId: this.projectId }).then(res => {
        this.bannerList = res.data.data.imageList
        this.bannerList.map(item => {
          this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url)
        })
      })
    },
    getProject() {
      axios.post('/home/engineering/case', { projectParentId: this.projectParentId }).then(res => {
        const resourcesDtoList = res.data.data.resourcesDtoList
        if (resourcesDtoList.length > 6) {
          resourcesDtoList.map(item => this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url))
          this.gongchengList = resourcesDtoList.slice(0, 6)
        } else {
          resourcesDtoList.map(item => this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url))
          this.gongchengList = resourcesDtoList
        }
      })
    },

    getNews() {
      axios.post('/home/news', { pageNum: 1, pageSize: 3 }).then(res => {
        this.newsList = res.data.data.newsList
        this.newsList.map(item => {
          if (item.url) {
            if (item.url.includes('mp4')) {
              this.$set(item, 'types', '2')
            } else {
              this.$set(item, 'types', '1')
            }
            this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url)
          } else {
            this.$set(item, 'types', '3')
          }
        })
      })
    },
    gotoYewu(j) {
      this.$store.commit('setOpenNav', [2, j])
      if (j == 0) this.$router.push('/highway_project')
      else if (j == 1) this.$router.push('/government_project')
      else if (j == 2) this.$router.push('/bridge_project')
      else if (j == 3) this.$router.push('/tunnel_project')
      else if (j == 4) this.$router.push('/intellectualization')
    },
    gotoDetails(item) {
      this.$store.commit('setOpenNav', [6, item.type - 1])
      this.$router.push({
        path: '/news_details',
        query: {
          id: item.id
        }
      })
    },
    gotoProject(item) {
      const name = item.projectName.substring(5, item.projectName.length)
      if (name == '公路工程') {
        this.$store.commit('setOpenNav', [4, 0])
        this.$router.push({
          path: '/project_way_index',
          query: {
            id: item.id
          }
        })
      } else if (name == '市政工程') {
        this.$store.commit('setOpenNav', [4, 1])
        this.$router.push({
          path: '/project_government',
          query: {
            id: item.id
          }
        })
      } else if (name == '投资业务') {
        this.$store.commit('setOpenNav', [4, 2])
        this.$router.push({
          path: '/investment_business',
          query: {
            id: item.id
          }
        })
      } else if (name == '工程检测') {
        this.$store.commit('setOpenNav', [4, 3])
        this.$router.push({
          path: '/engineering_inspection',
          query: {
            id: item.id
          }
        })
      }
    }
  }
}
</script>

<style>
</style>